<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    width="500px"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    custom-class="ele-dialog-form"
    :title="name + (isUpdate ? '修改班级' : '添加班级')"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-form-item label="所属学校:">
        <p style="line-height: 37px">{{ name }}</p>
      </el-form-item>
      <el-form-item label="年级:" prop="grade_id">
        <!-- <el-select
          style="width: 100%"
          clearable
          v-model="form.grade_id"
          placeholder="请选择年级"
        >
          <el-option
            :value="index+1"
            :label="item"
            v-for="(item, index) in [
              '一年级',
              '二年级',
              '三年级',
              '四年级',
              '五年级',
              '六年级',
              '七年级',
              '八年级',
              '九年级',
            ]"
            :key="index"
          />
        </el-select> -->
        <el-select
                    style="width: 100%"
                    clearable
                    :disabled="!query.schoole_id"
                    v-model="query.grade_id"
                    placeholder="请输入年级"
                  >
                    <el-option
                      :value="item.id"
                      :label="item.title"
                      v-for="(item, index) in nianji"
                      :key="index"
                    />
                  </el-select>
      </el-form-item>
      <el-form-item label="班级:" prop="title">
        <el-select
          style="width: 100%"
          clearable
          v-model="form.title"
          placeholder="请选择班级"
        >
          <el-option
            :value="''+item"
            :label="item + '班'"
            v-for="(item, index) in 50"
            :key="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="班级老师:" prop="teacher_id">
        <el-select
          style="width: 100%"
          v-model="form.teacher_id"
          multiple
          default-first-option
          filterable
          placeholder="请选择班级老师"
        >
          <el-option
            v-for="item in teacherData"
            :key="item.id"
            :label="item.realname+'('+item.username+')'"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序号:" prop="sort">
        <el-input-number
          :min="0"
          v-model="form.sort"
          placeholder="请输入排序号"
          controls-position="right"
          class="ele-fluid ele-text-left"
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "UserEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    name: String,
    id: Number,
  },
  // components: { Treeselect},
  data() {
    return {
      form: Object.assign({ status: 1 }, this.data),
      // 表单验证规则
      rules: {
        grade_id: [{ required: true, message: "请选择年级", trigger: "blur,change" }],
        title: [{ required: true, message: "请选择班级", trigger: "blur,change" }],
        teacher_id: [{ required: true, message: "请选择老师", trigger: "blur,change" }],
        sort: [{ required: true, message: "请输入排序号", trigger: "blur" }],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      teacherData: [],
    };
  },
  watch: {
    data(vel) {
      if (vel) {
        this.$http
        .get("/student/getGrade", {
          params: { schoole_id: this.id },
        })
        .then((res) => {
          this.nianji = res.data.data;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
        let obj = JSON.parse(JSON.stringify(vel));
        // this.form = Object.assign({}, this.data, {
        //   // role_ids: this.data.roles.map(d => d.id)
        // });
        // 取值赋予城市组件
        if (obj.id) {
          this.isUpdate = true;
        }
        console.log(obj)
        this.form = {
          id: obj.id,
          title:  obj.title || "",
          teacher_ids: obj.teacher_ids || "",
          teacher_id: obj.teacher_ids.split(",").map(d=> Number(d)) || "",
          grade_id: obj.grade_id || "",
          sort: obj.sort || "",
        };
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    },
    visible(v) {
      if (v) {
        this.$http
          .get("/teacher/index", {
            params: { schoole_id: this.id, page: 1, limit: 9999 },
          })
          .then((res) => {
            this.teacherData = res.data.data;
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      }
    },
  },
  mounted() {},
  methods: {
    changeInp() {
      this.$forceUpdate();
    },
    /* 保存编辑 */
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          // 城市数据处理
          this.$http
            .post("/classes/edit", { ...this.form, schoole_id: this.id,teacher_ids:this.form.teacher_id.join(",") })
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
  },
};
</script>

<style scoped>
</style>
